<template>
     <el-form :model="form" :rules="rules" label-width="auto" style="padding: 10px;">
       <el-row>
         <el-col :span="24">
           <el-form-item label="上级菜单">
             <el-tree-select
                 v-model="form.pid"
                 :data="menuOptions"
                 :props="{ value: 'code', label: 'name', children: 'children' }"
                 value-key="code"
                 placeholder="选择上级菜单"
                 check-strictly
             />
           </el-form-item>
         </el-col>
         <el-col :span="24">
           <el-form-item label="菜单类型" prop="menuType">
             <el-radio-group v-model="form.type">
               <el-radio label="M">目录</el-radio>
               <el-radio label="C">菜单</el-radio>
               <el-radio label="F">按钮</el-radio>
             </el-radio-group>
           </el-form-item>
         </el-col>

         <el-col :span="12">
           <el-form-item label="菜单编码" prop="code">
             <el-input v-model="form.code" placeholder="请输入菜单名称" :disabled="action=='edit'"/>
           </el-form-item>
         </el-col>
         <el-col :span="12" v-if="showEditor(['M','C'])">
           <el-form-item label="菜单图标" prop="icon">
             <!-- 图标选择器 -->
             <icon-select v-model="form.icon" />
           </el-form-item>
         </el-col>

         <el-col :span="12">
           <el-form-item label="菜单名称" prop="name">
             <el-input v-model="form.name" placeholder="请输入菜单名称" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="显示排序" prop="orderNum">
             <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
           </el-form-item>
         </el-col>

         <el-col :span="12" v-if="showEditor(['M','C'])">
           <el-form-item>
             <template #label>
                <span>
                  <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
                    <el-icon>
                      <question-filled />
                    </el-icon> </el-tooltip
                  >是否外链
                </span>
             </template>
             <el-radio-group v-model="form.isIframe">
               <el-radio :label="true">是</el-radio>
               <el-radio :label="false">否</el-radio>
             </el-radio-group>
           </el-form-item>
         </el-col>
         <el-col :span="12" v-if="showEditor(['M','C'])">
           <el-form-item prop="path">
             <template #label>
                <span>
                  <el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
                    <el-icon>
                      <question-filled />
                    </el-icon>
                  </el-tooltip>
                  路由地址
                </span>
             </template>
             <el-input v-model="form.path" placeholder="请输入路由地址" />
           </el-form-item>
         </el-col>

         <el-col :span="12" v-if="showEditor(['C'])">
           <el-form-item prop="component">
             <template #label>
                <span>
                  <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
                    <el-icon>
                      <question-filled />
                    </el-icon>
                  </el-tooltip>
                  组件路径
                </span>
             </template>
             <el-input v-model="form.component" placeholder="请输入组件路径" />
           </el-form-item>
         </el-col>
         <el-col :span="12" v-if="showEditor(['C','F'])">
           <el-form-item>
             <el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" />
             <template #label>
                <span>
                  <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top">
                    <el-icon>
                      <question-filled />
                    </el-icon>
                  </el-tooltip>
                  权限字符
                </span>
             </template>
           </el-form-item>
         </el-col>
         <el-col :span="12" v-if="showEditor(['C'])">
           <el-form-item>
             <el-input v-model="form.queryParam" placeholder="请输入路由参数" maxlength="255" />
             <template #label>
                <span>
                  <el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top">
                    <el-icon>
                      <question-filled />
                    </el-icon>
                  </el-tooltip>
                  路由参数
                </span>
             </template>
           </el-form-item>
         </el-col>
         <el-col :span="12" v-if="showEditor(['M','C'])">
           <el-form-item>
             <template #label>
                <span>
                  <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
                    <el-icon>
                      <question-filled />
                    </el-icon>
                  </el-tooltip>
                  显示状态
                </span>
             </template>
             <el-radio-group v-model="form.visible">
               <el-radio :label="true">显示</el-radio>
               <el-radio :label="false">隐藏</el-radio>
             </el-radio-group>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item>
             <template #label>
                <span>
                  <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
                    <el-icon>
                      <question-filled />
                    </el-icon>
                  </el-tooltip>
                  菜单状态
                </span>
             </template>
             <el-radio-group v-model="form.status">
               <el-radio :label="true">正常</el-radio>
               <el-radio :label="false">停用</el-radio>
             </el-radio-group>
           </el-form-item>
         </el-col>
         <el-col :span="24" v-if="showEditor(['M'])&&form.pid=='root'">
           <el-form-item label="依赖模块" prop="icon">
             <el-select v-model="form.depend" multiple placeholder="请选择依赖的模块">
               <el-option v-for="item in modules" :key="item.code" :label="item.name" :value="item.code"/>
             </el-select>
           </el-form-item>
         </el-col>
       </el-row>
       <div style="text-align:center;margin: 10px auto;">
         <el-button type="primary" @click="handleAdd">保存</el-button>
         <el-button @click="handleCancel">取消</el-button>
       </div>
      </el-form>
</template>
<script>
    import{reactive, ref} from 'vue'
    import {add,edit,treeList,getOrderNum} from '/http/module.js'
    import iconSelect from "/component/iconSelect.vue";
    const {ElMessage,ElMessageBox} = ElementPlus;
    export default {
       components: {iconSelect},
        props:{
          initParams:Object
        },
        setup(props,context){
            const form=reactive({
              code:'',
              name:'',
              pid:'root',
              icon:'',
              orderNum:'',
              depend:'',
              path:'',
              component:'',
              queryParam:'',
              isIframe:false,
              visible:true,
              type:'B',
              status:true,
              perms:''
            })
          const menuOptions = ref([]);
          const modules = ref([]);
          const rules = ref({
            code: [{ required: true, message: "菜单编码不能为空", trigger: "blur" }],
            name: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }],
            orderNum: [{ required: true, message: "菜单顺序不能为空", trigger: "blur" }],
            path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }]
          })
          const loadTreeList=()=>{
            treeList().then(res=>{
              const root = { code: "root", name: "主类目", children: [] }
              root.children = res.data;
              menuOptions.value.push(root);
              if(res.data){
                modules.value = res.data.filter(item=>item.code!=form.code).map(item=>{
                  return {code:item.code,name:item.name};
                })
              }
              console.log(modules)
            })
          }
          const showEditor=(types)=>{
              return types.includes(form.type);
          }


          const handleAdd = ()=>{
            console.log(action.value)
              if(action.value==='add'){
                add(form).then(res=> {
                  response(res,context)
                });
              }else{
                edit(form).then(res=> {
                  response(res,context)
                });
              }
          }


          const handleCancel = ()=>{
              context.emit('close',false)
          }
          const action = ref('edit');

          onMounted(()=>{
            loadTreeList();

            Object.assign(form,props.initParams.row)
            action.value = props.initParams.action;
            //获取排序号
            if(action.value=='add'){
              getOrderNum(form.pid).then(res=>{
                form.orderNum = res.data;
              })
            }

          })

          return{
            form,handleAdd,handleCancel,action,showEditor,menuOptions,modules,rules
          }
        }
    }
</script>

<style scoped>

</style>